/* Custom styles for the daycare theme */

#main-ajax-wrapper{
  width: 49%;
  display:inline-block;
}

#main-ajax-wrapper .section a{
  color: #0000FF !important;
  font-weight: 700;
}

#main-ajax-wrapper section button{
  color: #000 !important;
  border-radius: 4px;
  height: 100%;
  width: 100%;
}


#text-warn,#form-data{
  display: inline-block;
  width: 30px !important;
  color: #FFF !important;
  height: 40px !important;
  margin: 5%;
}


body {
  background-color: #fff;
  color: #333;
}
.henny-penny-regular {
  font-family: "Henny Penny", system-ui;
  font-weight: 400;
  font-style: normal;
}
.abeezee-regular {
  font-family: "ABeeZee", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.abeezee-regular-italic {
  font-family: "ABeeZee", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.navbar-custom {
  background-color: #f1d016;
  height: 90px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.navbar-custom .navbar-brand {
  font-size: 15px;
  height: 90px;
  display: flex;
  align-items: center;
}
.navbar-custom .navbar-brand img {
  height: 90px;
}
.navbar-custom .navbar-nav .nav-link {
  color: black;
  font-size: 15px;
  position: relative;
  text-decoration: none;
}
.navbar-custom .navbar-nav .nav-link:hover {
  color: white;
  text-decoration: none;
}
.navbar-custom .navbar-nav .nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: white;
  transition: width .3s;
  position: absolute;
  bottom: -5px;
  left: 0;
}
.navbar-custom .navbar-nav .nav-link:hover::after {
  width: 100%;
}
.navbar-custom .navbar-toggler {
  border-color: black;
}
.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Adjust dropdown menu */
.navbar-custom .dropdown-menu {
  background-color: #f1d016; /* Background color for dropdown */
  border: none; /* Remove default border */
}

.navbar-custom .dropdown-menu a.dropdown-item {
  color: black; /* Text color */
}

.navbar-custom .dropdown-menu a.dropdown-item:hover {
  color: white; /* Text color on hover */
  background-color: #d1b506; /* Hover background color */
}

.navbar-custom .dropdown-menu a.dropdown-item.active {
  color: white; /* Active item text color */
  background-color: #d1b506; /* Active item background color */
}
.sidebar {
    background-color: #07025d;
    padding: 20px;
}
.sidebar a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 10px;
}
.sidebar a:hover {
  color: #e7d234;
  background-color: #1e1a6b;
}
/* Content Area */
.content {
  margin-top: 16px; /* Offset for navbar height */
  overflow-y: auto;
  padding: 10px;
  background-color: #f8f9fa;
}
@media (max-width: 768px) {
  .sidebar {
      width: 100%;
      height: auto;
      position: relative;
  }

  .content {
      margin-left: 0;
      margin-top: 56px;
  }
}
.carousel-caption {
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
  border-radius: 10px;
}
.carousel-item img {
  height: 500px;
  object-fit: cover;
}
.btn-kprimary {
  color: #fff;
  background-color: #f1d016;
  border-color: #f1ce0b;
}
.btn-kprimary:hover {
  color: #fff;
  background-color: #d6b707;
  border-color: #f1ce0b;
}
.navbar-dark .navbar-nav .nav-link {
  color: #000;
}

.menu-item {
    text-transform: uppercase;
    font-weight: bold;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}
.menu-item:hover {
  transform: scale(1.1); /* Scale up the menu item on hover */
  color: #ff6f00; /* Change text color on hover */
}
.jumbotron {
  background-color: transparent; /* Transparent background */
  color: #fff;
  padding-top: 100px; /* Adjust top padding as needed */
}
.welcome-text {
  background-color: #f39c12; /* Orange background */
  color: #fff;
  padding: 25px;
  text-align: center;
}
.login-btn {
  background-color: #fff; /* Orange background */
  color: #f1d016;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  text-transform:uppercase;
}
.login-btn:hover {
  background-color: #0d0b3f; /* Darker blue on hover */
  color: #fff;
}
.section-title {
  color: #f39c12; /* Orange color */
  font-weight: bolder;
}
.section-content {
  padding: 40px 0;
}
.feature-icon {
  font-size: 3rem;
  color: #f39c12; /* Orange color */
}
.feature-title {
  color: #333;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.instagram-gallery {
  padding: 40px 0;
}
.instagram-gallery img {
  width: 100%;
  height: auto;
}
footer {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
}
/* Custom styles for logo section */
.navbar-collapse:first-child {
  padding-right: 30%;
}
.navbar-collapse:last-child {
  padding-left: 25%;
}
.top-content {
  width: 100%;
  padding: 0;
}
.top-content .carousel-control-prev {
  border-bottom: 0;
}
.top-content .carousel-control-next {
  border-bottom: 0;
}
.top-content .carousel-indicators li {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 50%;
}

.row,.col-md-3{
  width: 100%;
}

#card-texter-wrapper{
  width: 25%;
  float: left;
  margin-left: 5%;
}

.col-md-5{
  width: 100%;
  margin-left: 0%;
}

.col-md-5 select{
  width: 100%;
}


#card-wrapper-ajax{
  float: left;
  margin-left: 8%;
  border-radius: 4px;
  width: 25%;
}

.card-body-ajax{
  float: left;
  border-radius: 4px;
  width: 25%;
  margin-left: 8%;
}

.main-display-viewer{
  width: 91%;
  margin-left: 5%;
  height: 400px;
  margin-bottom: 5%;
  border-radius: 4px;
  border: 1px solid rgb(191, 210, 226);
}

.sub-min-viewer{
  width: 100%;
  padding: 5px;
  background-color: rgb(168, 211, 248);
}

.specifier-activ{
  float: left;
  padding: 4px;
  font-size: 13px;
  color: #000;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.specifier-activ:hover{
  color: green;
  cursor: pointer;
}

.show-form-activ{
  float: right;
  color: #000;
  background-color: #007BFF;
  font-size: 13px;
  border: none;
  background-color: inherit;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.submit-act-btn{
  width: 20%;
  background-color: #007BFF;
  padding: 6px;
  color: #FFFFFF;
  cursor: pointer;
  border: none;
}

.search-wrapp{
  float: right;
  width: 50%;
}
.search-wrapp input{
  width: 75%;
  padding: 6px;
}

.card-header h1{
  float: left;
  padding: 6px;
}

.card-body{
  width: 100%;
}

.card-body table{
  width: 100%;
}

.card-body table .head-tr th{
  padding: 4px;
  border: 1px solid #999;
}

.card-body table .main-tr-wrapper td{
  padding: 4px;
  border: 1px solid #999;
}

.card-body table .main-tr-wrapper td a{
  color: #0000FF;
  text-align: center;
}

.md-5-col-mod,.md-poop-susu-col,.md-poop-susu-col,.md-nap-col-5,.md-meal-times-6{
  float: left;
  width: 30%;
  margin-left: 2%;
}

.md-dieper-7{
  float: none;
  width: 98%;
  margin-top: 5%;
}

.min-coop-1{
  float: left;
  width: 30%;
  margin-left: 2%;
}
.min-coop-2{
  width: 30%;
  float: left;
  margin-left: 2%;
}

.min-coop-3{
  float: left;
  width: 30%;
  margin-left: 2%;
}

.row-md7{
  width: 95%;
}

.bottom-md7{
  float: left;
  width: 49%;
}
.bottom-md8{
  width: 49%;
  float: right;
}

.row-md7 textarea{
  width: 100%;
}

.card-md-dealer select{
  width: 100%;
}
.card-md-dealer label{
  font-weight: 500;
  color: #0212f0;
  font-size: 16px;
  float: left;
}
.card-md-dealer textarea{
  width: 100%;
}

.btn-submit{
  float: left;
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  cursor: pointer;
  border: none;
  width: 120px;
  border-radius: 4px;
  font-size: 14px;
}

/*FLASH MESSAGE */

@keyframes slideFromRight{
  from{
    transform: translateX(120%);
  }
  to{
    transform: translateX(0%);
  }
}

.flas-message-diaply{
  position: absolute;
  animation: slideFromRight 1s forwards;
  right: 0%;
  background-color: green;
  top: -5%;
  border-radius: 4px;
}

.flas-message-diaply p{
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
  text-align: center;
  float: left;
  color: #fff;
}

.closePopUp{
  float: right;
  cursor: pointer;
  border: none;
  background-color: inherit;
  padding: 6px;
  color: #000;
  font-size: 12px;
}

.md-data-tabler{
  width: 100%;
  overflow-y: scroll;
  padding: 10px;
}
.md-data-tabler .head-tr-mod{
  width: 100%;
  padding: 6px;
  border: 1px solid #999;
}

.md-data-tabler .head-tr-mod th{
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  font-weight: 500;
  border: 1px solid #999;
}

.md-data-tabler .data-tr-mod{
  width: 100%;
  padding: 6px;
  border: 1px solid #999;
}

.md-data-tabler .data-tr-mod td{
  padding: 6px;
  font-weight: 500;
  font-size: 14px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: 1px solid #999;
}

.wrapper-ajax-search{
  width: 40%;
  margin-left: 5%;
}
.wrapper-ajax-search input{
  width: 70%;
  float: left;
  border-radius: 4px;
  font-size: 12px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 4px;
}

.wrapper-ajax-search button{
  width: 25%;
  background-color: #007BFF;
  float: left;
  color: #FFF;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-left: 1%;
  padding: 6px;
  font-size: 13px;
}

.paginate-builder{
  width: 80%;
  margin-bottom: 3%;
}
.paginate-builder a{
  color: #000;
}
.paginate-builder p{
  color: #000;
}

.modal-md-5{
  display: block;
  width: 100%;
}
.modal-dialog,.container{
  width: 100%;
}

.modal-content select,input{
  width: 100%;
}

.table img{
  width: 100px;
  height: 70px;
}

.row-modal,.col-md-6{
  width: 100%;
}

.view-notif{
  float: right;
  background-color: orange;
  color: #FFFFFF;
  padding: 6px;
  border-radius: 4px;
  font-size: 14px;
}

.view-notif a{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.view-notif a:hover{
  text-decoration: none;
}

.event-callendar-col{
  width: 100%;
}
.event-callendar-col .left-opt-col-5{
  width: 49%;
  float: left;
}

.event-callendar-col span{
  color: red;
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic;
}

.left-opt-col-5 select{
  width: 100%;
}

.event-callendar-col .middl-event-col-6{
  float: right;
  width: 49%;
}
.middl-event-col-6 select{
  width: 100%;
}

.event-callendar-col .right-event-col-7{
  float: none;
  width: 100%;
}


.right-event-col-7 textarea{
  width: 100%;
}
.submit-event-recorder{
  width: 140px;
  background-color: #007BFF;
  border-radius: 4px;
  padding: 6px;
  color: #FFFFFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: none;
  cursor: pointer;
  font-size: 15px;
}
.submit-event-recorder:hover{
  color: darkblue;
}

.calendar-col-5 h3,p{
  padding: 5px;
}

.calendar-col-7{
  cursor: pointer;
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  background-color: #FFF;
}

.calendar-col-6 h1{
  padding: 4px;
}

.calendar-col-6{
  cursor: pointer;
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  background-color: #FFF;
}


.calendar-col-7:hover{
  border-radius: 4px;
  background-color: #636262;
  color: #FFF;
}

.calendar-col-7 h1{
  padding: 4px;
}

.data-tr-td{
  width: 50%;
}

.viewable-class-holder{
  width: 100%;
  padding: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.view-btn-eye a:hover{
  color: #FFFFFF;
  text-decoration: none;
}

@keyframes blink-animate{
  to{
    visibility: hidden;
  }
}

.new-alert{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: orange;
  font-weight: 600;
  animation: blink-animate 1s steps(5, start) infinite;
}

.old-alert{
  color: green;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.tr-td-class{
  padding: 10px 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.tr-td-class td,th{
  padding: 15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.edit-btn:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.delete-btn:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.submit-btn:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.close-form:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.close-form{
  float: right;
  padding: 6px;
  font-size: 14px;
  width: 100px;
  color: #FFF;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.edit-form-bt{
  position: absolute;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 10px;
  left: 30%;
  display: none;
  background-color: #FFF;
  width: 40%;
  top: 20%;
}

.delete-user-r{
  position: absolute;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 10px;
  left: 30%;
  display: none;
  background-color: #FFF;
  width: 40%;
  top: 20%;
}

.edit-form-bt select{
  width: 100%;
  padding: 6px;
  border-radius: 4px;
}

.edit-form-bt label{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  float: left;
}

.edit-form-bt h1{
  float: left;
}

.submit-btn{
  width: 140px;
  color: #FFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

#error-code{
  float: left;
  font-size: 10px;
  font-style: italic;
  color: red;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.edit-form-bt .submit-btn{
  float: left;
  padding: 6px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: orange;
  color: #FFFFFF;
  border-radius: 4px;
  border: none;
  width: 100px;
  cursor: pointer;
}

.button-btn:focus{
  border: none;
  outline: none;
  box-shadow: none;
}

.comment-activity{
  background-color: orange;
  padding: 6px;
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: none;
  cursor: pointer;
  width: 120px;
  color: #FFFFFF;
  border-radius: 16px;
}

.comment-activity:focus{
  outline: none;
  border: none;
  box-shadow: none;
}


.btn-submit-mid{
  float: left;
  background-color: #d1b506;
  color: #FFF;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: none;
  padding: 6px;
  border-radius: 4px;
}

.btn-submit-mid:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.image-payment-viewer{
  position: absolute;
  top: -5%;
  left: 10%;
  background-color: #FFF;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  padding: 5px;
  width: 80%;
  cursor: pointer;
  height: 500px;
}

.image-payment-viewer embed{
  width: 100%;
  height: 420px;
}

.closeImage{
  float: right;
  font-size: 20px;
  border: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  background-color: #FFF;
  width: 40px;
  color: red;
}

.closeImage:focus{
  outline: none;
  border: none;
  box-shadow: none;
}
.image-payment-viewer h1{
  float: left;
  padding: 6px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.edit-btn-fx{
  border: none;
}

.edit-btn-fx:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.edit-form-pointer{
  position: absolute;
  top: 25%;
  border-radius: 4px;
  width: 40%;
  left: 25%;
  background-color: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 6px;
}

.edit-form-pointer label{
  float: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

.edit-form-pointer input,select{
  width: 100%;
  border-radius: 4px;
}

.edit-form-pointer .submit-btn-bt{
  float: left;
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  border: none;
  cursor: pointer;
  width: 120px;
  background-color: #007BFF;
  border-radius: 4px;
  color: #FFF;
}

.closePopUp{
  float: right;
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  border: none;
  cursor: pointer;
  width: 120px;
  border-radius: 4px;
  color: red;
}

.closePopUp:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.attendance-marker{
  width: 100%;
}

.attend-marker-tbl{
  width: 80%;
  margin-top: 1%;
  border: 1.2px solid #999;
}

.attend-marker-tbl tr{
  border: 1px solid #999;
}

.submit-attend-marker{
  float: right;
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: #FFF;
}

.view-attend-eye{
  float: left;
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: #FFF;
}

.view-attend-eye a{
  text-decoration: none;
}

.view-attend-eye a:hover{
  text-decoration: none;
  color: #FFF;
}

.view-attend-eye:focus{
  box-shadow: none;
  outline: none;
  border: none;
}

.submit-attend-marker:focus{
  box-shadow: none;
  outline: none;
  border: none;
}

@keyframes FadeInward{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.staff-reg-ed,.staff-reg-edit,.route-edit-form,.car-edit-act{
  animation: FadeInward 1.2s forwards;
  width: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background-color: #FFF;
  padding: 6px;
}

.firsty-input-holder section{
  display: inline;
  width: 48%;
  float: left;
  margin-left: 1.5%;
}

.firsty-input-holder section input{
  width: 100%;
}

.head-reference{
  padding: 10px;
  margin-left: 0.5%;
  text-transform: uppercase;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

.edit-btn-link,.delete-btn-link{
  padding: 6px;
}

.edit-btn-link{
  color: #0000FF;
}

.delete-btn-link{
  color: red;
}

.delete-btn-link:hover{
  color: red;
}
.first-input-holder section{
  display: inline-block;
  width: 30%;
  margin-left: 2%;
}

.delete-form-route{
  position: absolute;
  left: 30%;
  width: 50%;
  padding: 10px;
  top: 0%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-color: #FFF;
}

@keyframes redAlert {
  to{
    visibility: hidden;
  }
}

.delete-form-route h1{
  animation: redAlert 1.2s steps(5, start) infinite;
  padding: 6px;
  color: red;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

.delete-form-route button:focus{
  border: none;
  box-shadow: none;
  outline: none;
}

.submit-btn-frm{
  float: left;
  text-transform: uppercase;
  padding: 6px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

.close-btn-frm{
  color: red;
  padding: 6px;
  float: right;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

button:focus{
  border: none;
  box-shadow: none;
  outline: none;
}

.search-btn:focus{
  outline: none;
  box-shadow: none;
  border: none;
}

.second-input-holder section{
  display: inline-block;
  width: 30%;
  margin-top: 2%;
  margin-left: 2%;
}

.third-input-holder section{
  display: inline-block;
  width: 30%;
  margin-top: 2%;
  margin-left: 2%;
}

.fourth-input-holder section{
  display: inline-block;
  width: 30%;
  margin-top: 2%;
  margin-left: 2%;
}


.fifth-input-holder section{
  display: inline-block;
  width: 45%;
  margin-top: 2%;
  margin-left: 2.5%;
}

.add-staff-btn{
  margin-left: 2%;
  padding: 6px;
  width: 120px;
  color: #FFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.add-staff-btn:focus{
  border: none;
  outline: none;
  box-shadow: none;
}

.close-btn{
  float: right;
  margin-right: 2%;
  width: 60px;
  padding: 6px;
  color: #FFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.close-btn:focus{
  border: none;
  outline: none;
  box-shadow: none;
}

.td-tr-link a{
  padding: 6px;
  margin-left: 1%;
  text-decoration: none;
  cursor: pointer;
  border: 1.2px solid rgb(204, 225, 244);
}

.delete-staff{
  position: absolute;
  width: 40%;
  left: 25%;
  top: 20%;
  background-color: #FFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 4px;
}

.delete-staff p{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;
}

.sbt-btn{
  float: left;
  margin-left: 5%;
  color: red;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  padding: 6px;
}

.sbt-btn:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.close-btn-clo{
  float: right;
  margin-left: 5%;
  color: maroon;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  padding: 6px;
}

.close-btn-clo:focus{
   outline: none;
  border: none;
  box-shadow: none;
}

.card-title-{
  width: 100%;
  padding: 6px;
}

.card-title- form{
  display: inline-block;
  width: 45%;
}

.filter-date{
  border: 1.2px solid rgb(193, 220, 243);
  border-radius: 6px;
}

.input-filter input{
  width: 43%;
  border: none;
  font-size: 13px;
  padding: 4px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.input-filter input:focus{
  border: none;
  box-shadow: none;
}

.input-filter input,button{
  display: inline-block;
}

.input-filter button{
  background-color: green;
  color: #FFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  border-top-right-radius: 4px;
  border: 1.2px solid rgb(193, 220, 243);
  float: right;
  border-bottom-right-radius: 4px;
  padding: 6px;
}

.filter-name-id{
  float: right;
}

.filter-name-id select{
  width: 85%;
  font-size: 13px;
  padding: 4px;
  border-radius: 4px;
  border: 1.2px solid rgb(195, 222, 245);
}

.filter-name-id button{
  background-color: green;
  color: #FFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  border-top-right-radius: 4px;
  border: 1.2px solid rgb(193, 220, 243);
  float: right;
  border-bottom-right-radius: 4px;
  padding: 6px;
}

.card-body h1,.button-view{
  display: inline-block;
}

.button-view{
  float: right;
  border-radius: 4px;
  padding: 6px;
  background-color: #007BFF;
  color: #FFF;
  font-size: 13px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  cursor: pointer;
}

.black-screeen-view{
  position: absolute;
  width: 100%;
  left: 0%;
  display: none;
  top: 0%;
  height: 800px;
  background-color: rgba(15,15,15,0.87);
}

.add-activity-post{
  position: absolute;
  left: 20%;
  width: 50%;
  display: none;
  padding: 10px;
  border-radius: 4px;
  top: 10%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background-color: #FFF;
}

.top-notch-head h1,.closeBtn{
  display: inline-block;
}

.top-notch-head h1{
  font-size: 13px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-transform: uppercase;
}

.closeBtn{
  float: right;
  padding: 6px;
  color: #FFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  width: 30px;
}

.add-activity-post label{
  float: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  padding: 2px;
}

.add-activity-post input{
  border-radius: 4px;
  font-size: 13px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 6px;
}

.mid-textarea-inp div{
  display: inline-block;
  width: 49%;
}

.mid-textarea-inp div textarea{
  padding: 6px;
  font-size: 13px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 100%;
  border-radius: 4px;
}

.sbmt-btn{
  padding: 6px;
  color: #FFF;
  font-size: 14px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 1%;
  width: 100px;
}

.tr-td td{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.tr-th th{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
}

/* .pt-2{
  background-color: #07025d;
  position: absolute;
  left: 0%;
  width: 98%;
  color: #FFF;
}

.pt-2 a{
  color: #FFF;
  background-color: inherit;
} */


.hidden{
  display: none;
}



/* @media(max-width: 768px){
  .row,.col-md-12,.card{
    width: 100%;
  }
  
  .card-body{
    width: 100%;
    overflow-x: scroll;
  }

  .col-md-2{
    display: none;
  }

  .card-body table{
    width: 100%;
  }
} */